<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-segment color="light" mode="md" [(ngModel)]="condition.bidType" (ionChange)="doRefresh()">
      <ion-segment-button mode="md" value="0">全部</ion-segment-button>
      <ion-segment-button mode="md" value="1">融企</ion-segment-button>
      <ion-segment-button mode="md" value="2">融宝</ion-segment-button>
      <ion-segment-button mode="md" value="3">融票</ion-segment-button>
    </ion-segment>
    <ion-buttons slot="end">
      <ion-button [routerLink]="['/auth/system-message']">
        <ion-icon name="mail-unread"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar class="orange-bar">
    <ion-searchbar [(ngModel)]="condition.title"
                   color="light"
                   mode="ios"
                   placeholder="请输入标的名称"
                   debounce="1000"
                   (ionChange)="doRefresh()">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingText="下拉刷新"
        refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <article class="item-content color-gray">
    <ion-grid class="custom-grid" *ngFor="let bid of dataList" [class.bid-completed]="bid['status'] !== 1" (click)="pushDetail(bid['bidIdSign'])">
      <ion-row>
        <ion-col size="7" class="prod-name color-blue">
          {{bid['title']}}({{bid['bidNo']}})
          <span *ngIf="bid['welfare_bid']" class="color-orange dingxiangbiao"><i class="iconfont icon-licaishouyi"></i>定向标</span>
        </ion-col>
        <ion-col size="5" class="progress-flag">
          <span *ngIf="timerMap[bid['bidIdSign']] && timerMap[bid['bidIdSign']]['bidCountDown'] > 0; else elseStatus" class="bg-light-orange">预售中</span>
          <ng-template #elseStatus>
            <span [class.bg-orange]="bid['status'] === 1" [class.bg-light-gray]="bid['status'] !== 1">
              {{bid['status'] | i18nPlural:configService.bidStatus}}
            </span>
          </ng-template>
        </ion-col>
      </ion-row>
      <ion-row class="second-row">
        <ion-col>
          <p class="rate-of-return color-orange">{{bid['apr']}}%</p>
          <p>参考年收益率</p>
        </ion-col>
        <ion-col>
          <p class="other-info color-blue">{{bid['period']}}{{bid['periodUnit']}}</p>
          <p>期限</p>
        </ion-col>
        <ion-col>
          <p class="other-info color-blue">{{bid['amount'] | tenThousand}}元</p>
          <p>总金额</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </article>

  <ion-infinite-scroll #infiniteScroll threshold="50px" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content
            loadingText="加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div class="content-bottom">
    投资有风险，出借需谨慎
  </div>

</ion-content>
